<template>
  <div>
    <van-nav-bar>
      <template #title>
        <i class="title">个人中心</i>
      </template>
    </van-nav-bar>
    <van-card
      class="van_card_person"
      thumb="http://n.sinaimg.cn/sinakd20108/600/w700h700/20200519/4ec2-itvqcca2210600.jpg"
    >
      <template #title>
        <div class="van_title">
          <router-link :to="!userInfo._id ? '/login' : '/userinfo'"><span class="van_title_span" v-if="!userInfo.phone">{{userInfo.name || '登陆/注册'}}</span></router-link>
        </div>
      </template>
      <template #tags>
        <div class="van_template">
          <van-icon name="graphic" /><span>{{userInfo.phone || '未绑定手机号'}}</span>
          <van-icon name="arrow" class="icon_arrow" />
        </div>
      </template>
    </van-card>
    <van-grid :column-num="3">
      <van-grid-item v-for="(item, index) in list" :key="index">
        <template #icon>
          <span class="icon"
            ><i :style="{ color: item.color }">{{ item.value }}</i
            >&nbsp;{{ item.unit }}</span
          >
        </template>
        <template #text>
          <span>{{ item.text }}</span>
        </template>
      </van-grid-item>
    </van-grid>
    <div class="person_list">
        <ul v-for="(item,index) in person_List" :key="index" :v-model="person_List">
            <li>
                <span><van-icon :name="item.icon" size="24px" :style="{color:item.color}" style="vertical-align: -20%"/>&nbsp;&nbsp;{{ item.title }}</span><van-icon class="arrow" name="arrow" />
            </li>
        </ul>
    </div>
    <div class="login_button" v-if="userInfo._id">
        <van-button type="danger" @click="logout">退出当前账号</van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      list: [
        {
          text: '我的余额',
          value: '0.00',
          unit: '元',
          color: 'orange'
        },
        {
          text: '我的优惠',
          value: '3',
          unit: '个',
          color: 'red'
        },
        {
          text: '我的积分',
          value: '0',
          unit: '分',
          color: 'green'
        }
      ],
      person_List: [
        {
          icon: 'balance-list-o',
          title: '我的订单',
          color: ''
        },
        {
          icon: 'goods-collect-o',
          title: '积分商城',
          color: 'red'
        },
        {
          icon: 'vip-card-o',
          title: '饿了么会员卡',
          color: 'orange'
        },
        {
          icon: 'smile-comment-o',
          title: '服务中心',
          color: '#1989fa'
        },
        {
          icon: 'smile-comment-o',
          title: '下载饿了么app',
          color: '#1989fa'
        }
      ]
    }
  },
  methods: {
    goTo (path) {
      this.$router.push(path)
    },
    logout () {
      Dialog.confirm({
        title: '退出登录',
        message: '您确定要退出当前账号吗'
      })
        .then(() => {
          // on confirm
          // 请求退出
          this.$store.dispatch('logout')
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  i {
    font-size: 18px;
    color: #fff;
  }
  .title {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
  }
  .van-icon {
    color: #fff;
  }
  background-color: #1989fa;
}
.van_card_person {
  margin: 0;
  background-color: #1989fa;
  font-size: 20px;
  color: #fff;
}
.van_title {
  margin-top: 20px;

}
  .van_title_span{
      color: #fff;
  }
.van_template {
  margin-top: 15px;
  position: relative;
}
.icon_arrow {
  position: absolute;
  right: 0;
  top: -15px;
}
.van-card:not(:first-child) {
  margin: 0;
}
.van-grid{
    border-bottom: 15px solid #eee;
}
.van-grid-item {
  font-size: 14px;
  span {
    display: block;
  }
  .icon {
    margin-bottom: 20px;
    i {
      font-size: 24px;
      font-weight: 700;
    }
  }
}
.person_list {
    ul{
        width: 100%;
    }
    li{
        margin-left: 10px;
        position: relative;
        width: 100%;
        font-size: 18px;
        display: inline-block;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #eee;
        .arrow{
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}
.login_button{
  margin-top: 25px;
  text-align: center;
  .van-button{
    width: 100%;
  }
}
</style>
